<template>
  <el-dialog title="修改密码" width="440px" class="gl_dialog_TitleLine changePassword" :close-on-click-modal="false" :visible.sync="dialogRePwdVisible">
    <el-form ref="IdentityUserUpdatePasswordInput" :model="IdentityUserUpdatePasswordInput" :rules="IdentityUserUpdatePasswordInput_Rules" label-position="left" hide-required-asterisk>
      <el-form-item :label="$t('rules.curPassword')" prop="currentPassword">
        <span class="svg-container">
          <svg-icon icon-class="password" />
        </span>
        <el-input v-model="IdentityUserUpdatePasswordInput.currentPassword" show-password :placeholder="$t('rules.curPassword')" />
      </el-form-item>
      <el-form-item :label="$t('rules.newPassWord')" prop="newPassword">
        <span class="svg-container">
          <svg-icon icon-class="password" />
        </span>
        <el-input v-model="IdentityUserUpdatePasswordInput.newPassword" show-password :placeholder="$t('rules.passWord')" type="text" />
      </el-form-item>
      <!-- <el-form-item prop="confirmPassword">
        <span class="svg-container">
          <svg-icon icon-class="password" />
        </span>
        <el-input v-model="IdentityUserUpdatePasswordInput.confirmPassword" show-password :placeholder="$t('rules.confirm')" />
      </el-form-item> -->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="dialogRePwdVisible = false">取 消</el-button>
      <el-button size="mini" type="primary" @click="submitResetPassword">保 存</el-button>
    </div>
  </el-dialog>
</template>
<script>
import validator from '@/lib/validate/index.js';
import { translateByCode } from '@/lib/getTransData';
import { IdentityUserUpdatePasswordInput } from '@/lib/form/swaggerForm';
import { api_PUT_UsersChangePassword } from '@/extend/api/swaggerApi/identity';
import { judgeToLogout } from '@/lib/oidc_fun';
export default {
  data() {
    return {
      dialogRePwdVisible: false,
      IdentityUserUpdatePasswordInput: new IdentityUserUpdatePasswordInput(),
      IdentityUserUpdatePasswordInput_Rules: {
        // 必填项，验证密码格式
        currentPassword: [
          validator.required(translateByCode('rules.requiredPassword'))
        ],
        newPassword: [
          validator.required(translateByCode('rules.requiredPassword')),
          {
            validator(rule, value, callback) {
              callback(
                validator.checkPwd(
                  value,
                  translateByCode('rules.validPassword')
                )
              );
            },
            trigger: 'blur'
          }
        ],
        confirmPassword: [
          validator.required(translateByCode('rules.requiredPassword')), // 必填项
          {
            validator(rule, value, callback) {
              // 验证密码格式
              callback(
                validator.checkPwd(
                  value,
                  translateByCode('rules.validPassword')
                )
              );
            },
            trigger: 'blur'
          },
          {
            validator: (rule, value, callback) => {
              // 两次输入是否一致
              if (value !== this.IdentityUserUpdatePasswordInput.password) {
                callback(new Error('erroe'));
              } else {
                callback();
              }
            },
            trigger: 'blur',
            message: translateByCode('rules.different')
          }
        ]
      },
      loading: false
    };
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        this.$refs['IdentityUserUpdatePasswordInput'].resetFields();
      }
    }
  },
  methods: {
    open() {
      this.dialogRePwdVisible = true;
      this.IdentityUserUpdatePasswordInput = new IdentityUserUpdatePasswordInput();
    },
    // 重置密码成功后跳转登录页
    submitResetPassword() {
      const that = this;
      this.loading = true;
      this.$refs['IdentityUserUpdatePasswordInput'].validate(valid => {
        if (valid) {
          api_PUT_UsersChangePassword(that.IdentityUserUpdatePasswordInput)
            .then(res => {
              this.$message({
                message: translateByCode('alert.resetPassword'),
                type: 'success'
              });
              this.logout();
            })
            .catch((error) => {
              this.$message({
                message: error.error.message,
                type: 'error'
              });
            });
          // this.setMarkTelephone(that.IdentityUserUpdatePasswordInput.phone);
          // 提交重置后的密码
          // TODO
        } else {
          return false;
        }
      });
    },
    async logout() {
      const tenantId =
        this.$store.state.user.info && this.$store.state.user.info.tenantId
          ? this.$store.state.user.info.tenantId
          : '';
      await this.$store.dispatch('user/logout');
      judgeToLogout(
        window.location.origin +
          window.location.pathname +
          '#/?tenantid=' +
          tenantId
      );
    }
  }
};
</script>
<style scoped>
.svg-container {
  padding: 0px 5px 0px 10px;
  color: #889aa4;
  vertical-align: middle;
  width: 30px;
  display: inline-block;
  position: absolute;
  z-index: 10;
}
.el-input--suffix .el-input__inner {
  padding-left: 30px;
}
</style>
<style lang="scss">
.changePassword .el-input--suffix .el-input__inner {
  padding-left: 30px;
}
</style>
